<template>
  <div class="home">
    <h2 style=" text-align: center;">Vue-barrage 基于vue的弹幕组件</h2>
    <div style="height:400px;width:800px; position: relative;margin:0px auto;background:#000;">
      <video controls
             src="" 
             autoplay
             style="width:100%;height:100%;z-index:2;" />
      <!-- 确保父元素是相对定位，弹幕容器是绝对定位 -->
      <v-barrage :arr="arr"
                 :isPause="isPause"
                 :percent="100">
      </v-barrage>
    </div>
    <div class="barrage-control">
      <input type="text"
             v-model="sendContent"
             placeholder="回车发送"
             id="sendContent"
             @keyup.enter="sendBarrage" />
      方向:
      <select style="margin:0px 12px;"
              v-model="direction">
        <option value="default">默认</option>
        <option value="top">顶部</option>
      </select>
      <input type="checkbox"
             v-model="isJs" /> js弹幕(直接写代码)
      <button id="sendBarrageBtn"
              style="margin-left:25px;"
              @click="sendBarrage">发送</button>
      <button id="pauseBtn"
              @click="isPause=true">暂停</button>
      <button id="startBtn"
              @click="isPause=false">开始</button>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import VBarrage from '@/components/VBarrage/index.vue'

export default {
  name: 'home',//http://video.potenza.edu:808/video/a/6/a67a2c2bfb223e4eb0f081014a08d00e/a67a2c2bfb223e4eb0f081014a08d00e.mp4
  components: {
    VBarrage
  },
  data () {
    return {
      arr: [],//弹幕的内容
      isPause: false,
      sendContent: null,
      isJs: false,
      direction: 'default',

      ws:null,
      ws_url:'ws://localhost:18082/websocket/barrage'
    }
  },
  mounted () {
    this.initTestData();
    this.login();
  },
  methods: {
      login(){
            //debugger
            this.ws = new WebSocket(this.ws_url);
            //ws = new WebSocket("ws://10.2.33.14:8080/websocket");
            // 建立 web socket 连接成功触发事件
            this.ws.onopen = this.onopen;
            // 接收服务端数据时触发事件
            this.ws.onmessage = this.onmessage;
            // 断开 web socket 连接成功触发事件
            this.ws.onclose = this.onclose;
            
            this.ws.onerror = this.onerror;
        },
        
        onopen() {
            this.log_message('Info: WebSocket 连接成功.');
        },
        onmessage (evt) {
            //debugger
            var received_msg = evt.data;
            this.log_message(received_msg);
        },
        onclose () {
            this.log_message('Info: WebSocket 关闭.');
        },
        onerror () {
            this.log_message('Info: WebSocket 出现错误.');
        },
        log_message(msg){
            //debugger
            this.arr.push({
              content: msg,
              direction: this.direction,
              isSelf: false,
              style: {
                color: 'red'
              },
              isJs: this.isJs
            });
        },
        close_ws(){
            //debugger
            alert("close");
            this.ws.close();
        },
        sendMessage(msg) {
            if (msg != '') {
                this.ws.send(msg);
            }
        },
    // 初始化模拟弹幕数据
    initTestData () {
      
    },
    // 发送弹幕
    sendBarrage () {
      this.sendMessage(this.sendContent);
      this.sendContent = null;
    },
  }
}
</script>
<style lang="scss" scoped>
.barrage-control {
  text-align: center;
  margin: 10px 0px;
}
</style>